<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="tableData" border style="width: 100%;margin:20px 0;">
      <el-table-column prop="id" label="编号" width="50"></el-table-column>
      <el-table-column prop="img" label="海报" width="80">
        <template slot-scope="scope">
          <img :src="scope.row.img" style="width:60px;height:80px;" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="city" label="城市" width="80"></el-table-column>
      <el-table-column prop="address" label="地址" width="140"></el-table-column>
      <el-table-column prop="artistname" label="艺人" width="80"></el-table-column>
      <el-table-column prop="showtime" :formatter="fmtTime" label="时间" width="180"></el-table-column>
      <el-table-column prop="type" label="类型" width="100"></el-table-column>
      <el-table-column prop="state" :formatter="fmtState" label="状态" width="100"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" @click="detail(scope.row.id)" icon="el-icon-search" circle></el-button>
          <el-button type="warning" @click="edit(scope.row.id)" icon="el-icon-edit" circle></el-button>
          <el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="详情" :visible.sync="dialogTableVisible">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
        <el-form-item label="活动名称">
          <el-input v-model="sizeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="sizeForm.date1"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              type="fixed-time"
              placeholder="选择时间"
              v-model="sizeForm.date2"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="sizeForm.type">
            <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
            <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
            <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="sizeForm.resource" size="medium">
            <el-radio border label="线上品牌商赞助"></el-radio>
            <el-radio border label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div style="display:flex;justify-content:center;height:30px;
    margin-bottom:30px">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        @current-change="getShowList"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import utils from "@/utils";
export default {
  data() {
    return {
      dialogTableVisible: false,
      tableData: [],
      detailInfo: {},
      loading: false,
      totalCount: 0,
      pageSize: 5,
      imageUrl: "",
      sizeForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  created() {
    this.getShowList();
    this.getShowCount();
  },
  methods: {
     onSubmit() {
        console.log('submit!');
      },
    del(id) {
      this.$confirm("删除后无法恢复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$get("/show/del", {
          params: { id }
        }).then(res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getShowList();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        });
      });
    },
    fmtTime(row, column, cellValue, index) {
      var time = utils._.convertMysqlTime2JSTime(cellValue);
      return time.getFormatDate() + " " + time.getFormatTime();
    },
    fmtState(row, column, cellValue, index) {
      return ["售票中", "待开票", "售罄"][cellValue];
    },
    getShowCount() {
      this.$get("/show/showTotalCount").then(res => {
        // console.log(res.data.totalCount);
        this.totalCount = res.data.totalCount;
      });
    },
    getShowList(pageIndex = 1) {
      this.$get("/show/showList", {
        params: { pageIndex, pageSize: this.pageSize }
      }).then(res => {
        this.tableData = res.data;
        console.log(res.data);
      });
    },
    detail(id) {
      this.dialogTableVisible = true;
      this.detailInfo = {};
      this.loading = true;
      this.$get("/show/detail", {
        params: {
          id
        }
      }).then(res => {
        this.loading = false;
        this.detailInfo = res.data.detail;
        this.detailInfo.pricelist = res.data.pricelist;
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style>
.el-dialog__body {
    display: flex
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
